<template>
  <div>
    <h3>{{ title }}的歌 , {{ title }} 今年{{ age }}岁</h3>
  </div>
</template>

<script>
export default {
  computed: {
    title() {
      const { id } = this.$route.params
      switch (id) {
        case '1':
          return '周杰伦'
        case '2':
          return '林俊杰'
        case '3':
          return '陈奕迅'
        default:
          return 'XXXX'
      }
    },
    age() {
      const { age } = this.$route.params
      return age
    }
  },

  /* 
  组件内守卫
  */

  // 进入组件时 调用
  beforeRouteEnter(to, from, next) {
    console.log(to, from, next)
    console.log('路由内进入时守卫')
    console.log(this) //undefined
    next(() => {
      console.log(this)
    })
  },
  // 路由改变且复用组件时 调用
  beforeRouteUpdate(to, from, next) {
    console.log(to, from, next, 'beforeRouteUpdate')
    console.log('组件内更新时')
    next()
  },
  // 离开组件时调用
  beforeRouteLeave(to, from, next) {
    console.log(to, from, next, 'beforeRouteLeave')
    console.log('组件离开时')
    next()
  },

  //监视动态路由参数的更新
  watch: {
    $route(newVal) {
      console.log('动态路由更新参数', newVal)
    }
  }
}
</script>

<style>
</style>